import React from 'react';
import ReactDOM from 'react-dom'

// 类似组件
// class Demo extends React.Component {
//   state = { count: 0, flag: true };
//   componentDidMount() {
//     this.timer = setInterval(() => {
//       this.setState(state => ({count: state.count+1}))
//     }, 500);
//   }
//   componentWillUnmount() {
//     clearInterval(this.timer)
//   }
//   unmount = () => {
//     const root = ReactDOM.createRoot(document.getElementById('root'))
//     root.unmount()
//   }
//   addCount = () => this.setState((state) => {
//     return { count: state.count + 1 }
//   });
//   render() {
//     return (
//       <div>
//         <h1>总和： {this.state.count}</h1>
//         <button onClick={this.addCount}>点击加一</button>
//         <button onClick={this.unmount}>卸载</button>
//       </div>
//     );
//   }
// }

// 函数组件
function Demo() {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('hhh');

  // 相当于 componentWillMount、componentWillUpdate、componentWillUnmount 三个钩子的结合
  // 当第二个表示监听的数据， 不写则都监听， [] 表示一个都不监听：[], 只会调用一个 componentWillMount 钩子
  React.useEffect(() => {
    // const timer = setInterval(() => {
    //   setCount(count + 1);
    // }, 500);
    return () => {
      // clearInterval(timer)
    };
  }, [count, name]);
  function addCount() {
    setCount(count + 1);
  }
  function changName() {
    setName('改变后的名称');
  }
  function unmount() {
    ReactDOM.unmountComponentAtNode(document.querySelector('root'))
  }
  return (
    <div>
      <h1>总和： {count}</h1>
      <h1>名字 {name}</h1>
      <button onClick={addCount}>点击加一</button>
      <button onClick={changName}>点击改名</button>
      <button onClick={unmount}>卸载组件</button>
    </div>
  );
}

export default Demo;
